{% extends 'back/index.html' %}

{% block content %}
 <div class="rt_content">
      <div class="page_title">
       <h2 class="fl">销售额统计</h2>
      </div>
	<input type="button" value="生成本周销售额柱状图" class="group_btn"/>
    <div class="dataStatistic">
        <div id="cylindrical">
        </div>
    </div>
 </div>


<script src="/static/back/js/amcharts.js" type="text/javascript"></script>
<script src="/static/back/js/serial.js" type="text/javascript"></script>
<script src="/static/back/js/pie.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        GetSerialChart();
        MakeChart(json);
    });
    var json = [
  { "name": "周一", "value": "35" },
  { "name": "周二", "value": "60" },
  { "name": "周三", "value": "22" },
  { "name": "周四", "value": "65" },
  { "name": "周五", "value": "35" },
  { "name": "周六", "value": "22" },
  { "name": "周日", "value": "43" },
  ]
    //柱状图  
    function GetSerialChart() {

        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = json;
        //json数据的key  
        chart.categoryField = "name";
        //不选择      
        chart.rotate = false;
        //值越大柱状图面积越大  
        chart.depth3D = 20;
        //柱子旋转角度角度
        chart.angle = 30;
        var mCtCategoryAxis = chart.categoryAxis;
        mCtCategoryAxis.axisColor = "#efefef";
        //背景颜色透明度
        mCtCategoryAxis.fillAlpha = 0.5;
        //背景边框线透明度
        mCtCategoryAxis.gridAlpha = 0;
        mCtCategoryAxis.fillColor = "#efefef";
        var valueAxis = new AmCharts.ValueAxis();
        //左边刻度线颜色  
        valueAxis.axisColor = "#ccc";
        //标题
        valueAxis.title = "每周销售额柱状图";
        //刻度线透明度
        valueAxis.gridAlpha = 0.2;
        chart.addValueAxis(valueAxis);
        var graph = new AmCharts.AmGraph();
        graph.title = "value";
        graph.valueField = "value";
        graph.type = "column";
        //鼠标移入提示信息
        graph.balloonText = "[[category]] [[value]]";
        //边框透明度
        graph.lineAlpha = 0.3;
        //填充颜色 
        graph.fillColors = "#b9121b";
        graph.fillAlphas = 1;

        chart.addGraph(graph);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorAlpha = 0;
        chartCursor.zoomable = false;
        chartCursor.categoryBalloonEnabled = false;
        chart.addChartCursor(chartCursor);

        chart.creditsPosition = "top-right";

        //显示在Main div中
        chart.write("cylindrical");
    }


</script>

    <script>
        (function ($) {
            $(window).load(function () {
                $('#drop5').collapse('show');
                $('#5-2').addClass('active');
            });
        })(jQuery);
    </script>
{% endblock %}
